<template>
    <div class="contract">
        <div class="search">
            <el-form :inline="true" :model="searchData" size="mini" class="demo-form-inline">
                <el-form-item label="合同编号:">
                    <el-input v-model="searchData.number"></el-input>
                </el-form-item>
                <el-form-item label="客户姓名:">
                    <el-input v-model="searchData.customer_name"></el-input>
                </el-form-item>
                <el-form-item label="业主姓名:">
                    <el-input v-model="searchData.owner_name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="primary" @click="add">添加合同</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class='content'>
            <el-dialog :title="dialogtitle" :visible.sync="centerDialogVisible" width="60%" center>
                <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm" inline size="mini">
                    <el-form-item label="合同编号" prop="number">
                        <el-input v-model="form.number" placeholder="请输入" :disabled="this.dialogtitle == '修改合同信息'"></el-input>
                    </el-form-item>
                    <el-form-item label="交易类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择">
                            <el-option label="出租" value="出租"></el-option>
                            <el-option label="出售" value="出售"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房源地址" prop="address">
                        <el-input v-model="form.address" placeholder="请输入">
                            <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
                        </el-input>
                    </el-form-item>
                    <el-form-item label="成交总价" prop="price">
                        <el-input type="number" v-model="form.price" placeholder="请输入"></el-input>万元
                    </el-form-item>
                    <el-form-item label="业主姓名" prop="owner_name">
                        <el-input v-model="form.owner_name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="成交单价" prop="unit_price">
                        <el-input type="number" v-model="form.unit_price" placeholder="请输入"></el-input>元
                    </el-form-item>
                    <el-form-item label="业主手机" prop="owner_phone">
                        <el-input type="number" v-model="form.owner_phone" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="业主座机" prop="owner_tel">
                        <el-input type="number" v-model="form.owner_tel" placeholder="029-7394499"></el-input>
                    </el-form-item>
                    <el-form-item label="业主身份证号" prop="owner_id_number">
                        <el-input v-model="form.owner_id_number" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="业主联系地址" prop="owner_address">
                        <el-input v-model="form.owner_address" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="房产证号" prop="house_number">
                        <el-input v-model="form.house_number" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="产证面积" prop="area">
                        <el-input type="number" v-model="form.area" placeholder="请输入"></el-input>平方米
                    </el-form-item>
                    <el-form-item label="用途" prop="purpose">
                        <el-select v-model="form.purpose" placeholder="请选择">
                            <el-option label="住宅" value="住宅"></el-option>
                            <el-option label="商住" value="商住"></el-option>
                            <el-option label="商铺" value="商铺"></el-option>
                            <el-option label="网点" value="网点"></el-option>
                            <el-option label="写字楼" value="写字楼"></el-option>
                            <el-option label="厂房" value="厂房"></el-option>
                            <el-option label="写厂" value="写厂"></el-option>
                            <el-option label="铺厂" value="铺厂"></el-option>
                            <el-option label="仓库" value="仓库"></el-option>
                            <el-option label="地皮" value="地皮"></el-option>
                            <el-option label="车位" value="车位"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="form.status" placeholder="状态">
                            <el-option label="作废" value="作废"></el-option>
                            <el-option label="成交确认" value="成交确认"></el-option>
                            <el-option label="合同登记" value="合同登记"></el-option>
                            <el-option label="权证过户" value="权证过户"></el-option>
                            <el-option label="物业交割" value="物业交割"></el-option>
                            <el-option label="售后服务" value="售后服务"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="签约人员" prop="signatory_department">
                        <el-select v-model="form.signatory_department" placeholder="请选择部门" @change="obtainUser">
                            <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                            <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" " prop="signatory">
                        <el-select v-model="form.signatory" placeholder="请选择员工">
                            <el-option v-for="(item,index) in userType" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="签约主管" prop="signatory_director_department">
                        <el-select v-model="form.signatory_director_department" placeholder="请选择部门" @change="obtainUsers">
                            <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                            <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" " prop="signatory_director">
                        <el-select v-model="form.signatory_director" placeholder="请选择员工">
                            <el-option v-for="(item,index) in userTypes" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户姓名" prop="customer_name">
                        <el-input v-model="form.customer_name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="客户手机" prop="customer_phone">
                        <el-input type="number" v-model="form.customer_phone" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="客户座机" prop="customer_tel">
                        <el-input type="number" v-model="form.customer_tel" placeholder="029-7394499"></el-input>
                    </el-form-item>
                    <el-form-item label="客户联系地址" prop="customer_address">
                        <el-input v-model="form.customer_address" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="客户身份证号" prop="customer_id_number">
                        <el-input v-model="form.customer_id_number" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="签约时间" prop="c_contract_time">
                        <el-date-picker type="date" placeholder="请选择" v-model="form.c_contract_time" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="附加条款" prop="additional">
                        <el-input v-model="form.additional" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="初审意见" prop="first_trial">
                        <el-input v-model="form.first_trial" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="复审意见" prop="review_case">
                        <el-input v-model="form.review_case" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="中介类别" prop="c_cate">
                        <el-select v-model="form.c_cate" placeholder="请选择">
                            <el-option label="普通中介" value="普通中介"></el-option>
                            <el-option label="普通收购" value="普通收购"></el-option>
                            <el-option label="大宗收购" value="大宗收购"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel('form')" size="mini">取 消</el-button>
                    <el-button type="primary" @click="submit('form')" size="mini">确 定</el-button>
                </span>
            </el-dialog>
            <div class='list'>
                <el-table ref="multipleTable" :data="list.data" tooltip-effect="light" style="width: 100%">
                    <el-table-column align="center" prop="number" label="合同编号" width="120"></el-table-column>
                    <el-table-column align="center" prop="type" label="交易类型" width="120"></el-table-column>
                    <el-table-column align="center" prop="address" label="房源地址" width="120" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="price" label="成交总价" width="120"></el-table-column>
                    <el-table-column align="center" prop="owner_name" label="业主姓名" width="120"></el-table-column>
                    <el-table-column align="center" prop="owner_phone" label="业主手机" width="120"></el-table-column>
                    <el-table-column align="center" prop="owner_id_number" label="业主身份证号" width="120"></el-table-column>
                    <el-table-column align="center" prop="owner_address" label="业主联系地址" width="120" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="purpose" label="用途" width="120"></el-table-column>
                    <el-table-column align="center" prop="area" label="产证面积" width="120"></el-table-column>
                    <el-table-column align="center" prop="status" label="状态" width="120"></el-table-column>
                    <el-table-column align="center" prop="signatoryName" label="签约人" width="120"></el-table-column>
                    <el-table-column align="center" prop="signatory_directorName" label="签约人部门" width="120"></el-table-column>
                    <el-table-column align="center" prop="signatory_departmentName" label="签约人主管" width="120"></el-table-column>
                    <el-table-column align="center" prop="signatory_director_departmentName" label="签约人主管部门" width="120"></el-table-column>
                    <el-table-column align="center" prop="customer_name" label="客户姓名" width="120"></el-table-column>
                    <el-table-column align="center" prop="customer_phone" label="客户手机" width="120"></el-table-column>
                    <el-table-column align="center" prop="customer_address" label="客户联系地址" width="120" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="customer_id_number" label="客户身份证" width="120"></el-table-column>
                    <el-table-column align="center" prop="c_contract_time" label="签约日期" width="120"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="edit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click.native.prevent="del(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
        </div>
    </div>
</template>
<style>
    .home .view-content{
        width: 87%;
    }
    .el-form-item__label,.el-form-item__content{
        font-size: 12px;
    }
    .el-input{
        padding-right: 5px;
    }
    .el-select-dropdown__item{
        font-size: 12px;
        padding: 0px 10px;
        height: 26px;
        line-height: 26px;
    }
    .el-input,.el-date-editor.el-input{
        width: 145px;
    }
</style>
<script>
    import conf from '../../config/userconf.js'
    import permconfig from '../../config/permconfig.js'
  export default {
    data() {
        var validatePhone = (rule,value,callback) => {    //正则手机号

            var MobileRegex = /^1[3|4|5|7|8][0-9]{9}$/;
            if (!MobileRegex.test(value)) {
                callback(new Error('手机号格式不正确！'))
            } else {
                callback();
            }
        };
        var validateTel = (rule,value,callback) => {    //正则座机号

            var MobileRegex = /^(\d{3,4}-)\d{7,8}$/;
            if (!MobileRegex.test(value)) {
                callback(new Error('电话格式不正确！'))
            } else {
                callback();
            }
        };
        var isCardNo = (rule,value,callback) => {    //正则身份证
                                
            var MobileRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            // var MobileRegex = /(^\d{14}[[0-9],0-9xX]$)|(^\d{17}[[0-9],0-9xX]$)/;
            if (!MobileRegex.test(value)) {
                callback(new Error('身份证格式不正确！'))
            } else {
                callback();
            }
        };
      return {
          list:[],
          searchData:{
                number:'',
                signatory:'',
                customer_name:'',
                owner_name:'',
          },
          form:{
                number:'',
                type:'',
                address:'',
                price:'',
                owner_name:'',
                owner_tel:'',
                owner_phone:'',
                owner_id_number:'',
                owner_address:'',
                house_number:'',
                purpose:'',
                area:'',
                status:'',
                signatory:'',
                signatory_department:'',
                signatory_director:'',
                signatory_director_department:'',
                customer_name:'',
                customer_phone:'',
                customer_tel:'',
                customer_address:'',
                customer_id_number:'',
                additional:'',
                remark:'',
                first_trial:'',
                review_case:'',
                c_contract_time:'',
                c_cate:'',
          },
          rules:{
            number: [
                { required: true, message: '请输入合同编号', trigger: 'blur' }
            ],
            type: [
                { required: true, message: '请选择交易类型', trigger: 'change' }
            ],
            address: [
                { required: true, message: '请输入房源地址', trigger: 'blur' }
            ],
            price: [
                { required: true, message: '请输入成交总价', trigger: 'blur' }
            ],
            unit_price: [
                { required: false, message: '请输入成交单价', trigger: 'blur' }
            ],
            owner_name: [
                { required: true, message: '请输入业主姓名', trigger: 'blur' }
            ],
            // owner_tel: [
            //     { required: false, message: '请输入业主座机', trigger: 'blur' },
            //     { required: false, validator: validateTel, trigger: 'blur'}
            // ],
            owner_phone: [
                { required: true, message: '请输入业主手机', trigger: 'blur' },
                { validator: validatePhone, trigger: 'blur'}
            ],
            owner_id_number: [
                { required: true, message: '请输入业主身份证号', trigger: 'blur' },
                { validator: isCardNo, trigger: 'blur'}
            ],
            owner_address: [
                { required: true, message: '请输入业主联系地址', trigger: 'blur' }
            ],
            house_number: [
                { required: false, message: '请输入房产证号', trigger: 'blur' }
            ],
            purpose: [
                { required: true, message: '请选择用途', trigger: 'change' }
            ],
            area: [
                { required: true, message: '请输入产证面积', trigger: 'blur' }
            ],
            status: [
                { required: true, message: '请选择状态', trigger: 'change' }
            ],
            c_cate: [
                { required: false, message: '请选择中介类别', trigger: 'change' }
            ],
            signatory: [
                { required: true, message: '请选择签约人姓名', trigger: 'change' }
            ],
            signatory_department: [
                { required: true, message: '请选择签约人部门', trigger: 'change' }
            ],
            signatory_director: [
                { required: true, message: '请选择签约人主管姓名', trigger: 'change' }
            ],
            signatory_director_department: [
                { required: true, message: '请选择签约人主管部门', trigger: 'change' }
            ],
            customer_name: [
                { required: true, message: '请输入客户姓名', trigger: 'blur' }
            ],
            customer_phone: [
                { required: true, message: '请输入客户手机', trigger: 'blur' },
                { validator: validatePhone, trigger: 'blur'}
            ],
            // customer_tel: [
            //     { required: false, message: '请输入客户座机', trigger: 'blur' },
            //     { validator: validateTel, trigger: 'blur'}
            // ],
            customer_address: [
                { required: true, message: '请输入客户联系地址', trigger: 'blur' }
            ],
            customer_id_number: [
                { required: true, message: '请输入客户身份证号', trigger: 'blur' },
                { validator: isCardNo, trigger: 'blur'}
            ],
            additional: [
                { required: false, message: '请输入附加条款', trigger: 'blur' }
            ],
            remark: [
                { required: false, message: '请输入备注', trigger: 'blur' }
            ],
            first_trial: [
                { required: false, message: '请输入初审意见', trigger: 'blur' }
            ],
            review_case: [
                { required: false, message: '请输入复审意见', trigger: 'blur' }
            ],
            c_contract_time: [
                { type: 'string', required: true, message: '请选择签约时间', trigger: 'change' }
            ],
          },
          multipleSelection: [],
          dialogtitle:'新增',
          Timef:true,
          centerDialogVisible:false,
          optionName:[],  //部门名称
          userType:[],  //部门员工
          userTypes:[],  //部门员工 (主管)
          htId: '',  //修改的合同id
          current: 1,  //当前页码
      }
    },
    methods: {
        /* 列表*/
        getList (data=Object()){
            data.page = this.current;
            conf.contract.list(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.list = res.data.data;
                    console.log(this.list);
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else if(res.data.code == -404){
                        this.list = [];
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        /*查询 */
        search () {
            let data  = this.searchData;
            this.getList(data)
        },
        /*取消 */
        cancel (formName) {
            this.centerDialogVisible = false;
            this.$refs[formName].resetFields()
        },
        /*提交 */
        submit (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.judgeprimise();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /*判断提交 */
        judgeprimise (data=null) {
            if (this.dialogtitle == '添加合同') {
                conf.contract.add(this.form,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        this.getList()
                        this.centerDialogVisible = false;
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.$refs['form'].resetFields();
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            }else if (this.dialogtitle == '修改合同信息'){
                data = this.form;
                data.id = this.htId;
                conf.contract.edit(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        this.getList();
                        this.centerDialogVisible = false;
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.$refs['form'].resetFields();
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            }
        },
        /*增 */
        add (formName) {
            var ownerPermission = window.localStorage.getItem('authories');
                var arr = ownerPermission.split(',');
                if(arr.indexOf(permconfig.qx_qita_tianjiahetong)  == -1){
                    alert('您没有该功能的权限');
                    return;
                }

            this.dialogtitle = '添加合同';
            this.centerDialogVisible = true;
        },
        /*删 */
        del (row,data=Object()) {
             var ownerPermission = window.localStorage.getItem('authories');
                var arr = ownerPermission.split(',');
                if(arr.indexOf(permconfig.qx_qita_shanchuhetong)  == -1){
                    alert('您没有该功能的权限');
                    return;
                }
            this.$confirm('确认删除合同 "'+row.number+'" ?', '删除合同', {  
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                data.id = row.id;
                conf.contract.del(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })

            }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
            });
        },
        /**改*/
        edit (val) {
            var ownerPermission = window.localStorage.getItem('authories');
                var arr = ownerPermission.split(',');
                if(arr.indexOf(permconfig.qx_qita_xiugaihetong)  == -1){
                    alert('您没有该功能的权限');
                    return;
                }
            this.dialogtitle = '修改合同信息';
            this.form = {
                number: val.number,
                type: val.type,
                address: val.address,
                price: val.price,
                unit_price: val.unit_price,
                owner_name: val.owner_name,
                owner_tel: val.owner_tel,
                owner_phone: val.owner_phone,
                owner_id_number: val.owner_id_number,
                owner_address: val.owner_address,
                house_number: val.house_number,
                purpose: val.purpose,
                area: val.area,
                status: val.status,
                signatory: val.signatory,
                signatory_department: val.signatory_department,
                signatory_director: val.signatory_director,
                signatory_director_department: val.signatory_director_department,
                customer_name: val.customer_name,
                customer_phone: val.customer_phone,
                customer_tel: val.customer_tel,
                customer_address: val.customer_address,
                customer_id_number: val.customer_id_number,
                additional: val.additional,
                remark: val.remark,
                first_trial: val.first_trial,
                review_case: val.review_case,
                c_contract_time: val.c_contract_time,
                c_cate: val.c_cate,
            };
            this.obtainUser(val.signatory_department);
            this.obtainUsers(val.signatory_director_department);
            this.htId = val.id;
            this.centerDialogVisible = true;

        },
        // 切换页码
        handleCurrentChange(val) {
            this.current = val;
            this.getList();
        },
        //交易类型
        typeVal(row, column, cellValue, index){
            switch (cellValue) {
                case 1:
                    return '出租'
                case 2:
                    return '出售'
            }
        },
        // 用途 change
        typeChange(row, column, cellValue, index){
            switch(cellValue){
                case 1:
                    return '住宅'
                case 2:
                    return '商住'
                case 3:
                    return '商铺'
                case 4:
                    return '网点'
                case 5:
                    return '写字楼'
                case 6:
                    return '厂房'
                case 7:
                    return '写厂'
                case 8:
                    return '铺厂'
                case 9:
                    return '仓库'
                case 10:
                    return '地皮'
                case 11:
                    return '车位'
                case 12:
                    return '其他'
            }
        },
        //获取部门
        obtainName(data=Object()){
            conf.department.nameOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.optionName = res.data.data;
                    // console.log(res); 
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else if(res.data.code == -404){
                        this.optionName = [];
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //获取部门员工
        obtainUser(val,data=Object()){
            this.userType = [];
            // this.form.signatory = '';
            data.d_id = val;
            conf.department.userOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    // console.log(res); 
                    this.userType = res.data.data;
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //获取部门员工  (主管)
        obtainUsers(val,data=Object()){
            this.userTypes = [];
            // this.form.signatory_director = '';
            data.d_id = val;
            conf.department.userOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    console.log(res); 
                    this.userTypes = res.data.data;
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
    },
    mounted (){
        this.$nextTick(function(){
            this.getList();
            this.obtainName();
        })
    },
        
  }
</script>